<template>
  <div>
    <div class="header">
      <van-icon
        name="arrow-left"
        class="icon-one"
        @click="$router.push('/index')"
      />
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        class="sousuo"
        @keydown.native="keydown($event)"
      />
      <span class="icon-two" @click="souSuo">搜索</span>
    </div>
    <div>
      <span>热门搜索</span>
      <img src="../images/demo/demo4.jpg" alt="" />
    </div>
    <search-button
      class="searchBtn"
      v-for="(item, index) in hot"
      :key="index + 'item'"
      @click.native="oneClick(item)"
      :item="item"
    ></search-button>
    <br />
    <span>常用分类</span>
    <div>
      <van-button
        type="warning"
        size="small"
        v-for="(two, i) in cate"
        :key="i"
        @click.native="twoClick(two)"
      >
        {{ two.name }}</van-button
      >
    </div>
    <div>
      <span>最近历史记录</span
      ><van-icon
        name="delete-o"
        @click="iconClick"
        v-if="num != '' ? true : false"
      />
    </div>
    <van-button
      class="vanBtn"
      v-for="(iii, dex) in num"
      :key="dex"
      color="#7232dd"
      plain
      size="mini"
      @click.native="threeClick(iii)"
      @touchstart="start(dex)"
      @touchend="end"
      @contextmenu="conText(e)"
      >{{ iii }}
      <van-icon
        name="clear"
        v-if="vanicon && dex === currentindex"
        @click="iconBtn(dex)"
        class="icon"
      />
    </van-button>
  </div>
</template>

<script>
import hotPage from "./hot.vue";
import SearchButton from "./searchButton.vue";
export default {
  name: "Search",

  data() {
    return {
      value: "",
      oneDiv: [],
      arrList: [],
      num: [],
      img: [],
      currentindex: 0,
      vanicon: false,
      loop: 0,
      hot: [
        {
          name: "领券中心",
        },
        {
          name: "Redmi K20",
        },
        {
          name: "RedmiBook 14",
        },
        {
          name: "智能积木 越野四驱车",
        },
        {
          name: "手环 腕带",
        },
      ],
      cate: [
        {
          name: "耳机",
        },
        {
          name: "手机",
        },
        {
          name: "音箱",
        },
        {
          name: "手表",
        },
        {
          name: "小米",
        },
        {
          name: "配件",
        },
        {
          name: "网关/传感器",
        },
        {
          name: "健康",
        },
        {
          name: "酷玩",
        },
      ],
    };
  },

  mounted() {
    document.oncontextmenu = function (e) {
      e.preventDefault();
    };
    // var color = ["#385c78", "#385c78", "#385c78", "#385c78", "#385c78"];
    var lastname = window.sessionStorage.getItem("history_key");
    let con = JSON.parse(lastname);
    this.arrList = con;
    console.log(this.arrList);
    if (this.arrList != null) {
      for (let i = 0; i < this.arrList.length; i++) {
        if (this.arrList.indexOf(this.arrList[i]) == i) {
          this.num.push(this.arrList[i]);
        }
      }
    }

    console.log(this.num);
  },
  components: {
    hotPage,
    SearchButton,
  },
  methods: {
    //随机色

    /*     randomRgb(item) {
        let R = Math.floor(Math.random() * 255);
        let G = Math.floor(Math.random() * 255);
        let B = Math.floor(Math.random() * 255);
        return {
          background: 'rgb(' + R + ',' + G + ',' + B + ')'
        };
      }, */

    iconBtn(dex) {
      console.log(111);
      this.num.splice(dex, 1);
      let con = JSON.stringify(this.num);
      window.sessionStorage.setItem("history_key", con);
      this.vanicon = false;
      clearTimeout(this.loop);
    },
    conText(e) {
      e.preventDefault();
    },
    // 长按触发删除事件
    start(dex) {
      clearTimeout(this.loop); //再次清空定时器，防止重复注册定时器
      this.loop = setTimeout(() => {
        this.loop = 1;
        this.currentindex = dex;
        this.vanicon = true;
      }, 500);
    },

    end() {
      if (this.loop != 0) {
        clearTimeout(this.loop); //清除定时器
        this.loop = 0;
        this.threeClick(iii);
        console.log(11111);
      }
      return false; //清空定时器，防止重复注册定时器
    },

    // 点击常用分类放入搜索框中
    oneClick(item) {
      this.value = item.name;
    },
    twoClick(two) {
      this.value = two.name;
    },
    threeClick(iii) {
      if (this.start()) {
        this.value = "";
      } else {
        this.value = iii;
      }
    },
    // 自动识别不需要的空格
    keydown(event) {
      if (event.keyCode == 32) {
        this.$toast("不要输入多余的空格");
        return (event.returnValue = false);
      }
    },
    // 垃圾桶删除历史记录
    iconClick() {
      this.$dialog
        .confirm({
          title: "删除",
          message: "是否确认删空全部历史记录？",
        })
        .then(() => {
          if (this.num != "") {
            window.sessionStorage.removeItem("history_key");
            this.num = [];
            this.$toast.success("删除成功！");
            this.value = "";
          } else {
            return this.$notify({
              type: "success",
              message: "已经没有任何历史记录了哦~",
            });
          }
        })
        .catch(() => {
          this.$toast("已取消删除历史记录");
        });
    },
    souSuo() {
      if (this.value == "") {
        return this.$toast("不能为空值！！");
      } else {
        this.num.unshift(this.value);
        window.sessionStorage.setItem("history_key", JSON.stringify(this.num));
        this.$router
          .push(
            // "/choose?keyword=" + this.value
            {
              path: "/choose",
              query: {
                keyword: this.value,
              },
            }
          )
          .then((res) => {
            console.log(res.query);
            window.sessionStorage.setItem("shuju", JSON.stringify(res.query));
          });
      }
      this.value = "";
    },
    mounted() {
      this.souSuo;
    },
  },
};
</script>

<style scoped>
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.header {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-one {
  font-size: 20px;
  text-align: center;
  margin-left: 0.133333rem;
  /* width: 10%; */
}
.sousuo {
  width: 86%;
}
.van-search {
  padding: 0.133333rem;
}
.icon-two {
  width: 10%;
  margin-left: 0.133333rem;
}
img {
  width: 100%;
  height: 4.8rem;
}
.van-button {
  margin: 0 0.133333rem;
}
.van-icon {
  float: right;
}
.icon {
  position: absolute;
  top: -8px;
  right: -8px;
  color: #7232dd;
  font-size: 16px;
}
.vanBtn {
  position: relative;
}
.searchBtn {
  display: inline-block;
}
</style>